<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 图书馆座位预约系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="login-container">
        <div class="login-card card">
            <div class="login-header">
                <h2><i class="bi bi-book"></i> 图书馆座位预约系统</h2>
                <p class="mb-0">Library Seat Booking System</p>
            </div>
            <div class="card-body p-4">
                <form id="loginForm">
                    <div class="mb-3">
                        <label class="form-label">学号/用户名</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-person"></i></span>
                            <input type="text" class="form-control" id="studentNo" placeholder="请输入学号" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">密码</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-lock"></i></span>
                            <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-gradient w-100 mb-3">登录</button>
                    <div class="text-center">
                        <a href="/register.html" class="text-decoration-none">还没有账号？立即注册</a>
                    </div>
                </form>
            </div>
            <div class="card-footer text-center text-muted">
                <small>测试账号：20240001 / 密码：123456</small>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script src="/js/request.js"></script>
    <script>
        var layer;
        layui.use('layer', function(){
            layer = layui.layer;
        });
    </script>
    <script>
        $(document).ready(function() {
            if (request.getToken()) {
                const user = request.getUserInfo();
                if (user && user.role === 'ADMIN') {
                    window.location.href = '/admin/index.html';
                } else {
                    window.location.href = '/index.html';
                }
            }

            $('#loginForm').submit(function(e) {
                e.preventDefault();
                const studentNo = $('#studentNo').val().trim();
                const password = $('#password').val();

                if (!studentNo || !password) {
                    layer.msg('请输入学号和密码', {icon: 2});
                    return;
                }

                const loadIndex = layer.load(2);
                request.post('/api/user/login', {
                    studentNo: studentNo,
                    password: password
                }).then(data => {
                    layer.close(loadIndex);
                    request.setToken(data.token);
                    request.setUserInfo(data.user);
                    layer.msg('登录成功', {icon: 1});
                    setTimeout(() => {
                        if (data.user.role === 'ADMIN') {
                            window.location.href = '/admin/index.html';
                        } else {
                            window.location.href = '/index.html';
                        }
                    }, 1000);
                }).catch(() => {
                    layer.close(loadIndex);
                });
            });
        });
    </script>
</body>
</html>

